<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品展示</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/saoma.css">
    <style>
    .side{
        width: 747px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 19px;
        margin-left: 235px;
    }
    .kind{
        height:44px;width: 120px;
        margin-left: 15px;
        font-size: 18px;
        /* font-weight: bolder; */
        color: #858585;
        background-color: white;
        border: none;
    }
    .kind:hover{
        color: #53BD5B;
        background-color: #DDDDDD;
    }
    .side-1{
        width: 800px;height: 435px ;
        display: flex;
        position: relative; 
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 35px;
        margin-left: auto;margin-right: auto;
        background: white;
    }
    .side-1>div{
        position: absolute; 
        width:844px;height: 428px;
        margin: 0;
        margin-top: 10px;
        margin-left: 67px;
    }
    .side-1 img{
        width:254px;height: 196px;
        margin-top: 10px;
        margin-right: 7px;
    }
    </style>
</head>
<body>
    <div id="head"></div>
    <div id="carousel-id" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-id" data-slide-to="0" class=""></li>
            <li data-target="#carousel-id" data-slide-to="1" class=""></li>
            <li data-target="#carousel-id" data-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="images/ps_banner01.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>Example headline.</h1>
                        <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                    </div> -->
                </div>
            </div>
            <div class="item">
                <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/ps_banner02.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>Another example headline.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                    </div> -->
                </div>
            </div>
            <div class="item active">
                <img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="images/ps_banner03.jpg">
                <div class="container">
                    <!-- <div class="carousel-caption">
                        <h1>One more for good measure.</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                    </div> -->
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <div class="side">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#side-1">强化复合系列</a></li>
                <li><a href="#side-1">高端水洗系列</a></li>
                <li><a href="#side-1">立体拼花系列</a></li>
                <li><a href="#side-1">多层实木系列</a></li>
                <li><a href="#side-1">实木系列</a></li>
            </ul>
            <!--<button class="kind">强化复合系列</button>
            <button class="kind">高端水洗系列</button>
            <button class="kind">立体拼花系列</button>
            <button class="kind">多层实木系列</button>
            <button class="kind">实木系列</button> -->
    </div>
    <div class="side-1">
        <div class="side-2">
            <div>
                <img src="images/item19.jpg" alt="">
                <img src="images/item21.jpg" alt="">
                <img src="images/item22.jpg" alt="">
            </div>
            <div>
                <img src="images/item20.jpg" alt="">
                <img src="images/item23.jpg" alt="">
                <img src="images/item24.jpg" alt="">
            </div>
        </div>  
        <div class="side-3">
            <div>
                <img src="images/item21.jpg" alt="">
                <img src="images/item20.jpg" alt="">
                <img src="images/item23.jpg" alt="">
            </div>
            <div>
                <img src="images/item22.jpg" alt="">
                <img src="images/item21.jpg" alt="">
                <img src="images/item22.jpg" alt="">
            </div>
        </div>
        <div class="side-4">
            <div>
                <img src="images/item23.jpg" alt="">
                <img src="images/item19.jpg" alt="">
                <img src="images/item22.jpg" alt="">
            </div>
            <div>
                <img src="images/item24.jpg" alt="">
                <img src="images/item21.jpg" alt="">
                <img src="images/item20.jpg" alt="">
            </div>
        </div>
        <div class="side-5">
            <div>
                <img src="images/item19.jpg" alt="">
                <img src="images/item21.jpg" alt="">
                <img src="images/item22.jpg" alt="">
            </div>
            <div>
                <img src="images/item20.jpg" alt="">
                <img src="images/item23.jpg" alt="">
                <img src="images/item24.jpg" alt="">
            </div>
        </div>  
        <div class="side-6">
            <div>
                <img src="images/item21.jpg" alt="">
                <img src="images/item20.jpg" alt="">
                <img src="images/item23.jpg" alt="">
            </div>
            <div>
                <img src="images/item22.jpg" alt="">
                <img src="images/item21.jpg" alt="">
                <img src="images/item22.jpg" alt="">
            </div>
        </div>
    </div>
    <div id="saoma"></div>
    <div id="footer"></div>
    <script>
        $(function(){
            $('.side>ul').click(function(){
                $(this).addClass("current").siblings().removeClass("current")
                console.log($(this).index())
                $(".side-1>div").eq($(this).index()).fadeIn(300).siblings().fadeOut(300)
            })
        })
    </script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>